<template>
  <div class="cart">
    <!-- 空提示 -->
    <van-empty v-if="store.cart.length === 0" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="80" description="购物车空空如也" />

    <template v-else>
      <van-swipe-cell v-for="goods in store.cart" :key="goods.id">
        <van-card :price="goods.price" :desc="goods.saleNum" :title="goods.title" class="goods-card">
          <!-- 自定义复选框 -->
          <template #thumb>
            <van-checkbox v-model="goods.checked" checked-color="red"></van-checkbox>
            <div class="van-image" style="width: 100%; height: 100%;">
              <img :src="goods.image" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
          <!-- 自定义步进器 -->
          <template #num>
            <van-stepper v-model="goods.amount" theme="round" button-size="22" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="handleRemove(goods.id)"/>
        </template>
      </van-swipe-cell>

      <!-- 提交订单 -->
      <van-submit-bar :price="store.totalMoney" button-text="提交订单">
        <van-checkbox :modelValue="store.allChecked" checked-color="red" @click="handleChck">全选</van-checkbox>
      </van-submit-bar>
    </template>
  </div>
</template>

<script lang="ts" setup>
import useCartStore from '../../store/modules/cart';

import { showSuccessToast } from 'vant';

const store = useCartStore()

const handleChck =() => {
  store.checkAll(!store.allChecked)
}

const handleRemove = (id: string) => {
  store.removeFromCart(id)
  showSuccessToast('删除成功')
}

</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

:deep(.van-card__thumb) {
  display: flex;
  width: 120px;
}

:deep(.van-checkbox__icon) {
  margin-right: 10px;
}

.delete-button {
  height: 100%;
}

:deep(.van-card__price) {
  color: red;
}

:deep(.van-stepper--round .van-stepper__plus) {
  background: red;
}

:deep(.van-stepper--round .van-stepper__minus) {
  border: 1px solid red;
  background: red;
  color: #fff;
}
</style>
